<template>
  <div>
    <scroll-table
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      @updateList="handleUpdate"
      :scrollY="400"
    ></scroll-table>
  </div>
</template>
<script setup lang="ts">
const loading = ref(false)
const dataSource = ref([])
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address'
  }
]
const params = reactive({
  page: 1,
  size: 20,
  total: 0
})

// 滑到底部更新数据
const handleUpdate = () => {
  console.log(params.page, params.size, params.total, 11111111)
  if (params.page * params.size < params.total) {
    loading.value = true
    params.page++
    setTimeout(() => {
      loading.value = false
      const list = new Array(10).fill({
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号'
      })
      dataSource.value = [...dataSource.value, ...list]
      params.size = 10
      params.total = 200
    }, 1500)
  }
}

// 获取列表
const getData = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    dataSource.value = [
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号'
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号'
      },
      {
        key: '3',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号'
      },
      {
        key: '4',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号'
      },
      {
        key: '5',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号'
      },
      {
        key: '6',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号'
      },
      {
        key: '7',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号'
      },
      {
        key: '8',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号'
      },
      {
        key: '9',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号'
      },
      {
        key: '10',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号'
      }
    ]
    params.page = 1
    params.size = 10
    params.total = 200
  }, 1500)
}
onMounted(() => {
  getData()
})
</script>

<style></style>